<template>
  <div class="queue-container">
    <!-- 左边 -->
    <div class="queue-left">
      <div class="queue-left-tabs">
        <div :class="{ 'queue-tab': true, active: consultActive ==  vItem.name }" v-for="(vItem, k) in consultList" :key="k"  @click="onChangeTab('queue', vItem.name)">
          {{ vItem.title }}
        </div>
      </div>
      <!-- 排队大厅 name:'queue-list'  排队统计 queue-stat  设置queue-set  -->
      <el-tabs v-model="activeName" @tab-click="handleClick" class="el-tabs" v-show="consultActive == 'queue-list'">
        <!-- <el-tab-pane label="当前排队" name="first"> -->
          <div class="tab-quebgf">
            <div class="tab-queue">
              <div class="tab-queue-aicnet" style="">
                <div class="tab-queue-top" v-if="historyShow==false">
              <div :class="{ 'top-item': true, active: tableActive == k }" v-for="(v, k) in queueTypeList" :key="k" @click="onChangeTab('table', k)">
                {{ v.queueName }}({{ v.queueCount }})
              </div>
            </div>
            <div class="tab-queue-top" v-else></div>
            <div style="display: flex;justify-content: space-between;">
              <div class="mbj-hx-btn" @click="freeShow = true">免排卷核销</div>
              <div v-has-role="'queue-list-callHistory'" class="history-btn" v-if="historyShow == false" @click="historyChange">历史叫号</div>
            <div class="history-btn history-rutern" v-else @click="historyChange">返回</div>
          </div>
              </div>
            <template v-if="historyShow==false">
              <div class="tab-queue-nav" v-if="saveStore.queFirst">
              <div class="nav-upper">
                <div class="nav-upper-left">
                  <div class="left-nowPeo">正在叫号</div>
                  <div class="left-table">空闲：{{ saveStore.queFirst.idleCount }}桌</div>
                </div>
                <div class="nav-upper-right">
                  <div v-has-role="'queue-list-clear'" class="right-button" @click="showAll">全屏</div>
                  <div v-has-role="'queue-list-againPrint'" class="right-button" :class="{ active: printActive }" @click="printTip(saveStore.queFirst.code)">重打小票</div>
                  <div v-has-role="'queue-list-insert'" class="right-button" :class="{ active: jumpActive }" @click="queJump">插队</div>
                  <div v-has-role="'queue-list-clear'" class="right-button" @click="queListClear">排队清零</div>
                </div>
              </div>
              <div class="nav-below">
                <div class="nav-below-main" v-if="saveStore.queFirst.isUseTicket"></div>
                <div class="below-value">{{ saveStore.queFirst.callNo }}</div>
                <div class="below-center">
                  <div class="center-top">
                    <!-- <div class="people-num">{{ saveStore.queFirst.mobile?saveStore.queFirst.mobile:'--'}}</div> -->
                    <div class="people-num">（{{ saveStore.queFirst.peopleNum }}人<span v-if="saveStore.queFirst.sourceType == '2'"> |
                      </span><span v-if="saveStore.queFirst.sourceType == '1'" style="color: #00AAFF;">线上</span>）</div>

                    <div class="table-style">{{ saveStore.queFirst.tag ? saveStore.queFirst.tag : '无' }}</div>
                  </div>
                  <div class="center-bottom">
                    <div class="state">{{ saveStore.queFirst.waitTime }} | 叫号{{ saveStore.queFirst.callNum }}次</div>
                  </div>
                  <div class="center-footer"></div>
                </div>
                <div class="below-right" @click="queControl(saveStore.queFirst.code, $event)">
                  <div v-has-role="'queue-list-call'" class="below-button spe1" data-type="call">叫号</div>
                  <div v-has-role="'queue-list-seat'" class="below-button spe2" data-type="sit">入座</div>
                  <div v-has-role="'queue-list-over'" class="below-button spe3" data-type="pass">过号</div>
                </div>
                <audio :src="playIndex" style="width: 0; height: 0;" ref="audioBoxaa"></audio>
              </div>
              <div style="border-bottom: 1px solid #E6E6E6;margin-top: 19px;"></div>
            </div>
            <div class="tab-queue-main" v-if="saveStore.queList">
              <div class="queue-main-top">
                <div class="top-left">排队列表</div>
                <div class="top-right">
                  <!-- <div class="top-right-up" data-type="up" @click="quePageChange" v-show="queueListForm.pageIndex >1">上一页</div>
                  <div class="top-right-down" data-type="down" @click="quePageChange" v-show="queueListForm.pageIndex >1">下一页</div> -->
                  <div class="top-right-up" data-type="up" @click="quePageChange" v-show="queueListForm.pageIndex > 1">上一页
                  </div>
                  <div class="top-right-down" data-type="down" @click="quePageChange"
                    v-show="saveStore.queList.length >= 4">下一页</div>
                </div>
              </div>
              <div class="queue-main-center">
                <div class="center-item" v-for="(v, k) in saveStore.queList" :key="k">
                  <div class="item-number" :class="getStatusColor(k)">{{ v.indexNo }}</div>
                  <div class="nav-below">
                    <div class="nav-below-main" v-if="v.isUseTicket"></div>
                    <div class="below-value">{{ v.callNo }}</div>
                    <div class="below-center below-center_bf">
                      <div class="center-top">
                        <!-- <div class="people-num">{{v.mobile?v.mobile:'--'}}</div> -->
                        <div class="people-num">（{{ v.peopleNum }}人<span v-if="v.sourceType == '2'"> | </span><span
                            v-if="v.sourceType == '2'" style="color: #00AAFF;">线上</span> ）</div>
                        <div class="table-style">{{ v.tag ? v.tag : '无' }}</div>
                      </div>
                      <div class="center-bottom">
                        <div class="state">{{ v.waitTime }} | 叫号{{ v.callNum }}次</div>
                      </div>
                      <div class="center-footer"></div>
                    </div>
                    <div class="below-right" @click="queControl(v.code, $event)">
                      <div v-has-role="'queue-list-call'" class="below-button spe1" data-type="call">叫号</div>
                      <div v-has-role="'queue-list-seat'" class="below-button spe2" data-type="sit">入座</div>
                      <div v-has-role="'queue-list-over'" class="below-button spe3" data-type="pass">过号</div>
                    </div>
                    <div class="below-radio" v-show="isShowRadio">
                      <el-radio v-model="controlCode" :label="v.code" @change="onChangeRadio(v)"></el-radio>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            </template>
             <template v-else>

        <!-- </el-tab-pane> -->
        <!-- <el-tab-pane label="历史记录" name="second"> -->
          <div class="tab-record">
            <div class="tab-record-top">
              <div class="tab-record-data">
                <div class="data-title">选择日期：&nbsp;</div>
                <div class="ke_date-picker">
                  <el-date-picker  v-model="queueRecordListForm.selectedDate" type="date" placeholder="年/月/日"
                  @change="selectedDateChange"></el-date-picker>
                </div>
            
                  <div class="action-btn-box">
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                  </div>
              </div>
              <div class="tab-record-btn" @click="recordsPageChange">
                <div class="btn-up" data-type="up">上一页</div>
                <div class="btn-down" data-type="down">下一页</div>
              </div>
            </div>
            <div class="tab-record-main">
              <div class="center-item" v-for="(v, k) in queueRecordList" :key="k">
                <div class="item-number">{{ k + 1 }}</div>
                <div class="nav-below">
                  <div style="display: flex;align-items: center">
                    <div class="below-value" style="padding-right: 19px;">{{ v.callNo }}</div>
                    <div class="below-center" style="background: #EBEBEB;">
                      <div class="center-top" v-if="v.stateDesc == '排队中'">
                        <div class="people-num">（{{ v.peopleNum }}人）</div>
                        <div class="table-style">{{ v.remark }}</div>
                      </div>
                      <div class="center-top" v-if="v.stateDesc == '已入座'">
                        <div class="people-num" style="color: #666666;">已就餐</div>

                      </div>
                      <div class="center-top" v-if="v.stateDesc == '已过号'">
                        <div class="people-num" style="color: #FF3333;">已过号</div>
                      </div>
                      <div class="center-bottom">
                        <div class="state">{{ v.waitTime }} | 叫号{{ v.callNum }}次</div>
                      </div>
                      <div class="center-footer"></div>
                    </div>
                  </div>
                  <div class="below-right" @click="recordsOperation(v.code, $event)">
                    <div class="below-button spe2" style="background: #FF6A00;color: #fff;" 
                      data-type="reLine">重排</div>
                    <div class="below-button spe3" data-type="black" v-if="v.mobile">加黑名单</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        <!-- </el-tab-pane> -->
             </template>
          </div>
          </div>
       
      </el-tabs>
      <el-tabs v-model="activeName2" @tab-click="queueSummaryChange" class="el-tabs spe" v-show="consultActive == 'queue-stat'">
        <el-tab-pane label="今日" name="first">
          <div class="tab-last">
            <div class="tab-last-top">
              <div class="top-left">
                <div class="left-title">取号：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.queueCount
                }}</span></div>
                <div class="left-title">就餐：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.seatCount
                }}</span></div>
              </div>
              <div class="top-right">
                <div class="">
                  {{ dayjs(queueSummaryForm.beginTime).format('YYYY.MM.DD HH:mm:ss') }}-{{ dayjs(queueSummaryForm.endTime).format('YYYY.MM.DD HH:mm:ss') }}
                </div>
              </div>
            </div>
            <div class="tab-last-main">
              <div class="main-title">
                <div class="main-title-item">桌型</div>
                <div class="main-title-item">取号数</div>
                <div class="main-title-item">就餐数</div>
                <div class="main-title-item">就餐率</div>
                <div class="main-title-item">等位时长</div>
              </div>
              <div class="main-value">
                <div class="main-value-item" v-for="(v, k) in queueSummary.lsit" :key="k" :class="{ 'odd': k % 2 == 0 }">
                  <div class="item">{{ v.queueName }}</div>
                  <div class="item">{{ v.queueCount }}</div>
                  <div class="item">{{ v.seatCount }}</div>
                  <div class="item">{{ v.seatRate }}</div>
                  <div class="item">{{ v.avgWaitDuration }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="昨日" name="second">
          <div class="tab-last">
            <div class="tab-last-top">
              <div class="top-left">
                <div class="left-title">取号：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.queueCount
                }}</span></div>
                <div class="left-title">就餐：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.seatCount
                }}</span></div>
              </div>
              <div class="top-right">
                <div class="">
                  {{ dayjs(queueSummaryForm.beginTime).format('YYYY.MM.DD HH:mm:ss') }}-{{ dayjs(queueSummaryForm.endTime).format('YYYY.MM.DD HH:mm:ss') }}
                </div>
              </div>
            </div>
            <div class="tab-last-main">
              <div class="main-title">
                <div class="main-title-item">桌型</div>
                <div class="main-title-item">取号数</div>
                <div class="main-title-item">就餐数</div>
                <div class="main-title-item">就餐率</div>
                <div class="main-title-item">等位时长</div>
              </div>
              <div class="main-value">
                <div class="main-value-item" v-for="(v, k) in queueSummary.lsit" :key="k" :class="{ 'odd': k % 2 == 0 }">
                  <div class="item">{{ v.queueName }}</div>
                  <div class="item">{{ v.queueCount }}</div>
                  <div class="item">{{ v.seatCount }}</div>
                  <div class="item">{{ v.seatRate }}</div>
                  <div class="item">{{ v.avgWaitDuration }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="本周" name="third">
          <div class="tab-last">
            <div class="tab-last-top">
              <div class="top-left">
                <div class="left-title">取号：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.queueCount }}</span></div>
                <div class="left-title">就餐：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.seatCount }}</span></div>
              </div>
              <div class="top-right">
                <div class="">
                  {{ dayjs(queueSummaryForm.beginTime).format('YYYY.MM.DD HH:mm:ss') }}-{{ dayjs(queueSummaryForm.endTime).format('YYYY.MM.DD HH:mm:ss') }}
                </div>
              </div>
            </div>
            <div class="tab-last-main">
              <div class="main-title">
                <div class="main-title-item">桌型</div>
                <div class="main-title-item">取号数</div>
                <div class="main-title-item">就餐数</div>
                <div class="main-title-item">就餐率</div>
                <div class="main-title-item">等位时长</div>
              </div>
              <div class="main-value">
                <div class="main-value-item" v-for="(v, k) in queueSummary.lsit" :key="k" :class="{ 'odd': k % 2 == 0 }">
                  <div class="item">{{ v.queueName }}</div>
                  <div class="item">{{ v.queueCount }}</div>
                  <div class="item">{{ v.seatCount }}</div>
                  <div class="item">{{ v.seatRate }}</div>
                  <div class="item">{{ v.avgWaitDuration }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="本月" name="four">
          <div class="tab-last">
            <div class="tab-last-top">
              <div class="top-left">
                <div class="left-title">取号：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.queueCount
                }}</span></div>
                <div class="left-title">就餐：<span style="color: #FF6A00;font-weight: bold;">{{ queueSummary.seatCount
                }}</span></div>
              </div>
              <div class="top-right">
                <div class="">
                  {{ dayjs(queueSummaryForm.beginTime).format('YYYY.MM.DD HH:mm:ss') }}-{{ dayjs(queueSummaryForm.endTime).format('YYYY.MM.DD HH:mm:ss') }}
                </div>
              </div>
            </div>
            <div class="tab-last-main">
              <div class="main-title">
                <div class="main-title-item">桌型</div>
                <div class="main-title-item">取号数</div>
                <div class="main-title-item">就餐数</div>
                <div class="main-title-item">就餐率</div>
                <div class="main-title-item">等位时长</div>
              </div>
              <div class="main-value">
                <div class="main-value-item" v-for="(v, k) in queueSummary.lsit" :key="k" :class="{ 'odd': k % 2 == 0 }">
                  <div class="item">{{ v.queueName }}</div>
                  <div class="item">{{ v.queueCount }}</div>
                  <div class="item">{{ v.seatCount }}</div>
                  <div class="item">{{ v.seatRate }}</div>
                  <div class="item">{{ v.avgWaitDuration }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="queue-left-setup" v-show="consultActive == 'queue-set'">
        <div class="setup-top">
          叫号设置
        </div>
        <div class="setup-main">
          <div class="setup-main-item">
            <div class="item-left">线上（小程序）取号</div>
            <div class="item-center"></div>
            <div class="item-take">
              <el-switch v-model="isMiniQueue" active-color="#ff6a00" inactive-color="#ff6a00"
                @change='miniQueueChange'></el-switch>
              <div class="right-take-title">关闭后小程序不可取号</div>
              <!-- <el-switch v-model="setupForm.callMode" active-color="#ff6a00" inactive-color="#ff6a00"></el-switch> -->
            </div>
            <div class="item-distance"><el-input  v-model="setupForm.limitKM" placeholder="" type="number"  @input="distanceChange"></el-input>  km内可以取号，不填则不限制</div>
          </div>
          <div class="setup-main-item">
            <div class="item-left">恶意取号惩罚</div>
            <div class="item-center"></div>
            <div class="item-distance"> 
              <el-input  v-model="setupForm.inHour" placeholder="" type="number"></el-input>  
              小时内，客户取消排队
              <el-input  v-model="setupForm.cancelNum" placeholder="" type="number"></el-input>  
              次，当前客户取号锁定
              <el-input  v-model="setupForm.lockHour" placeholder="" type="number"></el-input>  
              小时 
            </div>
          </div>
          <div class="setup-main-item">
            <div class="item-left">叫号类型标识呼叫次数</div>
            <div class="item-center"></div>
            <div class="item-right">
              <el-radio v-model="setupForm.callNum" label="1">一次</el-radio>
              <el-radio v-model="setupForm.callNum" label="2">二次</el-radio>
              <el-radio v-model="setupForm.callNum" label="3">三次</el-radio>
            </div>
          </div>
          <div class="setup-main-item">
            <div class="item-left">叫号语音</div>
            <div class="item-center"></div>
            <div class="item-right">
              <el-radio v-model="setupForm.voiceType" label="0" @change="voiceTypeFun('0')">默认语音</el-radio>
              <el-radio v-model="setupForm.voiceType" label="1" @change="voiceTypeFun('1')">自定义语音</el-radio>
            </div>
          </div>
          <!-- <div class="setup-main-item">
            <div class="item-left">测试叫号语音</div>
            <div class="item-center"></div>
            <div class="item-right">
              <el-radio v-model="setupForm.voiceType" label="0">A</el-radio>
              <el-radio v-model="setupForm.voiceType" label="1">B</el-radio>
              <el-radio v-model="setupForm.voiceType" label="2">C</el-radio>
              <el-radio v-model="setupForm.voiceType" label="3">D</el-radio>
              <el-radio v-model="setupForm.voiceType" label="4">E</el-radio>
            </div>
          </div> -->
          <div class="setup-main-item" style="padding-bottom: 10px;">
            <div class="item-left">提示语</div>
            <div class="item-center"></div>
            <div class="item-pick">
              <el-select v-model="speechStart" @change="speechStartUrl">
                <el-option v-for="item in speechList" :key="item.value" :label="item.name"
                  :value="item.fileName"></el-option>
              </el-select>
            </div>
          </div>
          <div class="setup-main-item" style="padding-bottom: 10px;">
            <div class="item-left">基础语</div>
            <div class="item-center"></div>
            <div class="item-pick">
              <el-select v-model="speechMid" @change="speechMidUrl">
                <el-option v-for="item in voiceTypeList" :key="item.value" :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
          <div class="setup-main-item" style="padding-bottom: 10px;">
            <div class="item-left">结束语</div>
            <div class="item-center"></div>
            <div class="item-pick">
              <el-select v-model="speechEnd" @change="speechEndUrl">
                <el-option v-for="item in speechList" :key="item.value" :label="item.name"
                  :value="item.fileName"></el-option>
              </el-select>
            </div>
          </div>
          <!-- <div class="setup-main-item" style="padding-bottom: 0px;">
            <div class="item-left">结束语</div>
            <div class="item-center"></div>
            <div class="item-pick">
              <el-select v-model="setupForm.endPrompt" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div> -->
          <div class="setup-main-footer">
            <div class="footer-btn-back" @click="consultActive = 'queue-list'">返回</div>
            <div v-has-role="'queue-set-save'" class="footer-btn-save" @click='changeSet'>保存</div>
          </div>
        </div>
        <div class="setup-footer" style="margin-top: 4px;">
          <div class="footer-title">其他</div>
          <div class="footer-value">
            <div :class="{ 'footer-value-tab': true, active: setupTabActive == k }" v-for="(vItem, k) in setupTabList" :key="k" @click="onChangeTab('setup', k)" v-has-role="vItem.role" >
              {{ vItem.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="queue-right">
      <div class="queue-right-title">取号</div>
      <div class="queue-right-people" @click="focusTarget = '到店人数'">
        <div class="people-num">到店人数：</div>
        <el-input v-model="AddQueueCallForm.peopleNum" placeholder="输入人数"></el-input>
      </div>
      <div class="queue-right-mobile" @click="focusTarget = '手机号码'">
        <div class="mobile">手机号码：</div>
        <el-input v-model="AddQueueCallForm.memberMobile" placeholder="非必填"></el-input>
      </div>
      <div class="queue-right-ask">
        <div class="ask-title">要求：</div>
        <el-radio v-model="AddQueueCallForm.remark" label="无限制">无限制</el-radio>
        <el-radio v-model="AddQueueCallForm.remark" label="里面">里面</el-radio>
        <el-radio v-model="AddQueueCallForm.remark" label="外面">外面</el-radio>
        <el-radio v-model="AddQueueCallForm.remark" label="卡座">卡座</el-radio>
      </div>
      <div class="queue-right-btn">
        <div class="btn-items">
          <div class="item" @click="handleNum('1')">1</div>
          <div class="item" @click="handleNum('2')">2</div>
          <div class="item" @click="handleNum('3')">3</div>
          <div class="item spe" style="margin-right: 0;" @click="handleDelLastNum()"></div>
        </div>
        <div class="btn-items">
          <div class="item" @click="handleNum('4')">4</div>
          <div class="item" @click="handleNum('5')">5</div>
          <div class="item" @click="handleNum('6')">6</div>
          <div class="item" style="margin-right: 0;" @click="handleDelNum()">删除</div>
        </div>
        <div class="btn-items">
          <div class="item" @click="handleNum('7')">7</div>
          <div class="item" @click="handleNum('8')">8</div>
          <div class="item" @click="handleNum('9')">9</div>
          <div class="item" style="margin-right: 0;" @click="handleNum('0')">0</div>
        </div>
      </div>
      <div class="queue-right-take" @click="addQueCall" v-has-role="'queue-take'">
        取号
      </div>
      <el-dialog class="couponGift" v-model="couponShow" width="52%" destroy-on-close :show-close="false" center>
        <div class="couponTitle">卡券赠送</div>
        <div class="couponForm">
          <div class="formName">发放用户手机号码：</div>
          <div class="formType1">
            <input type="text">
            <div class="formBtn">检测</div>
          </div>
        </div>
        <div class="couponUseInfo">
          <div>姓名：张三</div>
          <div>可用券：5张</div>
        </div>
        <div class="couponForm">
          <div class="formName">会员卡选择：</div>
          <div class="formType2">
            <el-select placeholder="请选择">
              <el-option v-for="item in vipCartList" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
        <div class="couponUseInfo">
          <div>本金：<span>500.00</span></div>
          <div>赠送：<span>100.00</span></div>
          <div>积分：<span>200.00</span></div>
        </div>
        <div class="couponForm">
          <div class="formName">营销活动名：</div>
          <div class="formType3">
            <input type="text">
          </div>
        </div>
        <div class="couponForm">
          <div class="formName">发放券名称：</div>
          <div class="formType4">
            <el-select placeholder="请选择">
              <el-option v-for="item in vipCartList" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            <div class="formBtn">检测</div>
          </div>
        </div>
        <div class="couponForm">
          <div class="formName">营销活动名：</div>
          <div class="formType5">
            <div class="Type5">
              <input type="text">
              <div>张</div>
            </div>
          </div>
        </div>

        <div class="couponForm">
          <div class="formName">券发放方式：</div>
          <div class="formType5">
            <el-radio-group v-model="surNum" @change="surChange">
              <el-radio label="1">免费发放</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="couponForm">
          <div class="formName">有效日期：</div>
          <div class="formType5">
            <el-radio-group v-model="surNum" @change="surChange">
              <el-radio label="1">固定日期</el-radio>
              <el-radio label="2">相对日期(领取后)</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="couponDateType1" v-if="surNum == '1'">
          <div class="pickerTitle">有效起止日期：</div>
          <div class="Picker">
            <span>2023-03-05</span>
            <span>一</span>
            <el-date-picker v-model="beijingTime" :picker-options="pickerOptions" type="date" placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
        <div class="couponDateType2" v-if="surNum == '2'">
          <div class="dateItem">
            <span>领券后：</span>
            <div class="dateCount">
              <div class="btn">-</div>
              <div class="count">1</div>
              <div class="btn">+</div>
            </div>
            <span>天生效;</span>
          </div>
          <div class="dateItem">
            <span>有效天数：</span>
            <div class="dateCount">
              <div class="btn">-</div>
              <div class="count">1</div>
              <div class="btn">+</div>
            </div>
            <span>天</span>
          </div>
        </div>
        <div class="couponForm">
          <div class="formName">营销活动名：</div>
          <div class="formType3">
            <input type="text">
          </div>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="couponShow = false">取 消</el-button>
            <el-button @click="console.log('11')">确 认</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog class="dubbingMask" v-model="dubbingShow" width="50%" destroy-on-close :show-close="false" center>
        <div class="dubbingTitle">
          <div>配音合成</div>
        </div>
        <div class="dubbingContent">
          <div class="minTitle">配音规则</div>
          <div class="rule">1、配音文字长度必须小于60个汉字或者字母数字； </div>
          <div class="rule">2、文字转语音时，必须需要能链接到互联网；</div>
          <div class="minTitle">配音文字</div>
          <textarea cols="30" rows="2" v-model="dubText"></textarea>
          <div class="minTitle">音库选择</div>
          <div style="padding: 0 5%;">
            <el-radio-group v-model="dubVoice" @change="surChange">
              <el-radio :label="item.value" v-for="(item, index) in personList" :key="index">{{ item.name }}</el-radio>
            </el-radio-group>
          </div>
          <div class="changeTitle" @click="CreateSpeech()">文字转换成MP3语音</div>

          <div class="dubbingTabTop">
            <div>配音文件</div>
            <div>操作</div>
          </div>
          <div class="dubbingTab" v-for="(item, index) in speechList" :key="index">
            <input :class="{ dubbingName: item.reName }" type="text" v-model="item.name" :disabled="!item.reName">
            <div class="dubbingMenu">
              <span @click="DeleteSpeechFile(item.fileName)">删除</span>
              <span @click="playAudio(item, index)" v-if="item.state == '0'">播放</span>
              <span @click="pauseAudio(item, index)" v-if="item.state == '1'">暂停</span>
              <span @click="item.reName = true" v-if="!item.reName">重命名</span>
              <span @click="ReNameFile(item)" v-if="item.reName">完成</span>
            </div>
            <audio controls ref="audioBox" :src="item.url" style="width: 0; height: 0;" @play="onPlay(item)"
              @pause="onPause(item)"></audio>
          </div>
        </div>
        <template #footer>

        </template>
      </el-dialog>
    </div>
  </div>
  <div id="audioBox"></div>
  <ZDialog v-model="confirmShow" width="60%" title="提示" content="确定要排队清零吗？" @cancel="confirmShow = false"
    @confirm="confirmClear()"></ZDialog>
  <QueDialog v-model="onConfirmShow" width="30%" title="补打小票" :content="printName" @cancel="clearForm()"
    @confirm="queueRePrintReceipts()"></QueDialog>
  <el-dialog :show-close="false" width="30%" v-model="onJumpShow">
    <div class="confirmPopue">
      <div class="confirmPopue-title">插队</div>
      <div class="confirmPopue-center">将 <span style="color:#FF6A00">{{ printName }}</span> （当前排队号：<span
          style="color:#FF3333">第{{ nowIndex }}位</span>）</div>
      <div class="confirmPopue-input">
        <div class="confirmPopue-input-title">移动到第位</div>
        <input type="text" class="confirmPopue-input-value" v-model="jumpForm.jumpIndex">
        <div class="confirmPopue-input-icon">位</div>
      </div>
      <div class="popup-btn">
        <div class="btn-cancle" @click="clearForm()">取消</div>
        <div class="btn-submit" @click="onConfirmJump">确认</div>
      </div>
    </div>
  </el-dialog>
  <Send ref="SendRef" :visible="SendVisible" @emitCancel="emitSendCancel"
    @emitSubmit="emitSendSubmit" />
    <freeDialog v-model="freeShow" v-if="freeShow" width="30%" title="免排卷核销"  @cancel="freeForm()"></freeDialog>
</template>

<script setup>
import Api from '@/api'
import dayjs from "dayjs"
import ls from '@/lib/ls'
import { ElNotification } from 'element-plus'
import { validateMobile } from '@/lib/util.js'
import ZDialog from '@/components/Dialog/Dialog.vue'
import { getLocalIPv4 } from "@/utils/getip.js";
import QueDialog from "./QueDialog.vue";
import freeDialog from "./freeDialog.vue";
import Send from '@/views/workbench/member/components/send.vue'
import { transformWorkTime } from '@/utils/chenhao.js'
import useSaveStore from '@/store/save' 
import useConfigStore from '@/store/config'  
import { ref } from 'vue'
const router = useRouter()
const configStore = useConfigStore()
const orgStartTime = configStore.shopInfo.orgReportStartTime //orgStartTime
const orgEndTime = configStore.shopInfo.orgReportEndTime //orgEndTime

const saveStore = useSaveStore()
// const orgCode = ref(ls.get("USER_INFO") ? ls.get("USER_INFO").orgCode : "");
watch(saveStore.queState,(newValue,oldValue)=>{
  GetQueueList()
})
// ---------------------------------------------- tab切换 ---------------------------------------------------
const speechStart = ref('请选择')
const speechMid = ref('请选择')
const speechEnd = ref('请选择')

const beijingTime = ref('')
const getNowDate = () => {
  let stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
  beijingTime.value = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
}

const historyShow = ref(false)
const historyChange = ()=> {
  historyShow.value = !historyShow.value;
  console.log(historyShow.value)
}

//语音合成
const dubText = ref('')
const dubVoice = ref('')
const CreateSpeech = () => {
  Api.Common.PcObjProcess.Do({ functionName: "CreateSpeech", orgCode: "0004", contentData: { isBegin: "1", perCode: dubVoice.value, text: dubText.value } })
    .then(res => {
      console.log(res);
      GetSpeechList('1')
      alert(res.result)
    })
}
//获取合成配音列表
const speechList = ref([])
const GetSpeechList = (voiceType) => {
  speechList.value = []
  Api.Common.PcObjProcess.Do({ functionName: "GetSpeechList", orgCode: "0004", contentData: { isBegin: "1", voiceType: voiceType } })
    .then(res => {
      let i = 0
      res.result.map(e => {
        e.state = '0'
        e.value = i++
        e.name = e.fileName.split('.')[0]
        e.reName = false
      })
      speechList.value = res.result
      console.log('speechList', speechList.value)
    })
}
//获取语音类型
const voiceTypeList = ref('')
const voiceTypeFun = (voiceType) => {
  speechStart.value = '请选择'
  speechMid.value = '请选择'
  speechEnd.value = '请选择'
  GetBaseVoiceList(voiceType)
  GetSpeechList(voiceType)
}
const GetBaseVoiceList = (voiceType) => {
  Api.Common.PcObjProcess.Do({ functionName: "GetBaseVoiceList", "contentData": { voiceType } })
    .then(res => {
      voiceTypeList.value = res.result
    })
}

const surNum = ref("");
const surChange = () => {
  console.log(surNum.value);
};
const dubbingShow = ref(false) // 语音弹窗
const couponShow = ref(false) // 优惠券弹窗

const vipCartList = ref([
  {
    value: "0",
    label: "梦田音乐酒吧品牌卡222NO.123523692154",
  },
  {
    value: "1",
    label: "梦田音乐酒吧品牌卡111NO.123523692154",
  },
]);
const consultActive = ref('') //排队大厅 name:'queue-list'  排队统计 queue-stat  设置queue-set 
const consultList = ref([ ])
const tableActive = ref(0)

const getStatusColor = (k)=> {
  switch (k) {
        case 0:
          return 'red-col';
        case 1:
          return 'oreg-col';
        case 2:
          return 'gre-col';
        default:
          return 'default-col'; // 默认颜色
  }
}

const onChangeTab = (type, k) => {
  switch (type) {
    case 'queue':
      consultActive.value = k
      console.log(consultActive.value)
      break
    case 'table':
      tableActive.value = k
      queueListForm.value.queueSymbol = queueTypeList.value[k].queueSymbol
      GetQueueList(true)
      break
    case 'setup':
      setupTabActive.value = k
      if (k == 0) {
        // dubbingShow.value = true
        // couponShow.value = true
        handleSend()
      } else {
        dubbingShow.value = true
      }

      console.log(setupTabActive.value)
      break
  }
}
const activeName = ref('first')
const activeName2 = ref('first')
const handleClick = (tab, event) => {
  console.log(tab, event)
}
const queueSummaryChange = (e) => {
  // console.log(e.index);
  queueSummaryForm.value.beginTime = transformWorkTime(e.index,orgStartTime,orgEndTime)[0]
  queueSummaryForm.value.endTime = transformWorkTime(e.index,orgStartTime,orgEndTime)[1] 
  // console.log('queueSummaryChange:',queueSummaryForm.value.beginTime, queueSummaryForm.value.endTime)
  // switch (e.index) {
  //   case '1':
  //     queueSummaryForm.value.beginTime = dayjs().subtract(1, 'day').startOf('day').format('YYYY-MM-DD')
  //     queueSummaryForm.value.endTime = dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD')
  //     break;
  //   case '0':
  //     queueSummaryForm.value.beginTime = dayjs().startOf('day').format('YYYY-MM-DD')
  //     queueSummaryForm.value.endTime = dayjs().endOf('day').format('YYYY-MM-DD')
  //     break;
  //   case '2':
  //     queueSummaryForm.value.beginTime = dayjs().startOf('week').format('YYYY-MM-DD')
  //     queueSummaryForm.value.endTime = dayjs().endOf('week').format('YYYY-MM-DD')
  //     break;
  //   case '3':
  //     queueSummaryForm.value.beginTime = dayjs().startOf('month').format('YYYY-MM-DD')
  //     queueSummaryForm.value.endTime = dayjs().endOf('month').format('YYYY-MM-DD')
  //     break; 
  // }
  getqueueSummary()
}
// -------------------------------------------------- 排队大厅操作 -------------------------------------------------
const isShowRadio = ref(false)
const heightLight = ref('0') // 选中显示
const onConfirmShow = ref(false) // 弹窗提示控制(重打小票)
const onJumpShow = ref(false) // 弹窗提示控制(插队)
const printName = ref('')
const nowIndex = ref('') // 当前位置
// 单选按钮切换
const onChangeRadio = (v) => {
  // 重打小票
  printName.value = v.callNo
  nowIndex.value = v.queueIndex
  console.log(v);
  if (heightLight.value == '1') {
    console.log(printName.value);
    onConfirmShow.value = true
  } else if (heightLight.value == '2') {
    // 插队
    onJumpShow.value = true
    jumpForm.value.code = v.code
  }

}

const printActive = ref(false)
const jumpActive = ref(false)

// 重打小票
const printTip = (val) => {
  if (!printActive.value) {
    printActive.value = true
    jumpActive.value = false  // 确保只有一个按钮是选中状态
    heightLight.value = '1'
    isShowRadio.value = true
    // controlCode.value = val
    // queueRePrintReceipts()
  } else {
    printActive.value = false
    heightLight.value = ''
    isShowRadio.value = false
  }
}

// 插队
const queJump = () => {
  if (!jumpActive.value) {
    jumpActive.value = true
    printActive.value = false  // 确保只有一个按钮是选中状态
    heightLight.value = '2'
    isShowRadio.value = true
  } else {
    jumpActive.value = false
    heightLight.value = ''
    isShowRadio.value = false
  }
}

// 关闭重打小票选择后清空内容
const clearForm = () => {
  printActive.value = false
  jumpActive.value = false
  onConfirmShow.value = false
  isShowRadio.value = false
  heightLight.value = 0
  controlCode.value = ''
  onJumpShow.value = false
}
const jumpForm = ref({
  code: '',
  jumpIndex: '1'
})
// 排号清零
const queListClear = () => {
  queueClearSymbol.value = queueListForm.value.queueSymbol
  queueClear()
}


// 确认插队
const onConfirmJump = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "queueJump", "contentData": jumpForm.value })
    .then(res => {
      console.log(res);
      clearForm()
      GetQueueList(true) // 获取当前排队列表
    })
}
// 叫号 入座 过号
const queControl = (val, e) => {
  controlCode.value = val
  seatForm.value.code = val
  console.log(val);
  switch (e.target.dataset.type) {
    case 'call':
      queueCall() // 叫号
      break;
    case 'sit':
      queueSeat() // 入座
      break;
    case 'pass':
      queuePass() // 过号
      break;

  }
}
// 当前排队页码变化
const quePageChange = (e) => {
  console.log(e);
  if (!e.target.dataset.type) {
    return
  }
  if (e.target.dataset.type == 'up') {
    queueListForm.value.pageIndex--

  } else if (e.target.dataset.type == 'down') {
    queueListForm.value.pageIndex++
  }

  // 获取排队列表
  Api.Common.PcObjProcess.Do({ "functionName": "GetQueueList", "orgCode": "0004", "contentData": queueListForm.value })
    .then(res => {
      console.log(res);
      queueListOther.value = res.list

      saveStore.queList = res.list
      saveStore.queFirst = res.topQueue
      // // queueList.value = res.result
      // // queueListFirst.value = res.result[0]
      // if(queueListForm.value.pageIndex == '1'){

      // }else{
      //   queueListOther.value = res.result
      // }

    })
}
// ------------------------------------------------- 历史记录 --------------------------------------------------
const recordsOperation = (code, e) => {
  if (!e.target.dataset.type) {
    return
  }
  controlCode.value = code
  switch (e.target.dataset.type) {
    case 'sit':
      seatForm.value.code = code
      reQueue()
      break;
    case 'reLine':
      reQueue()
      break;
    case 'black':
      queueBlock()
      break;
  }
  console.log(code);
  console.log(e.target.dataset.type);
}
// 历史记录页码变化
const recordsPageChange = (e) => {
  if (!e.target.dataset.type) {
    return
  }
  if (e.target.dataset.type == 'up') {
    queueRecordListForm.value.pageIndex--

  } else if (e.target.dataset.type == 'down') {
    queueRecordListForm.value.pageIndex++
  }
  getQueueRecordList()
}
// 时间修改
const selectedDateChange = (e) => {
  queueRecordListForm.value.selectedDate = dayjs(e).format('YYYY-MM-DD')
  
}
//查询日期
const handleSearch = ()=> {
  getQueueRecordList(true)
}
// ------------------------------------------------ 取号 -------------------------------------------------------
// 取号操作
const addQueCall = () => {
  console.log(AddQueueCallForm.value);
  // return
  addQueueCall()
}
const focusTarget = ref('到店人数')
const handleNum = (str) => {
  if (focusTarget.value == '到店人数') {
    AddQueueCallForm.value.peopleNum += str
  } else {
    AddQueueCallForm.value.memberMobile += str
  }
}
const handleDelLastNum = () => {
  if (focusTarget.value == '到店人数') {
    AddQueueCallForm.value.peopleNum = AddQueueCallForm.value.peopleNum.slice(0, AddQueueCallForm.value.peopleNum.length - 1);
  } else {
    AddQueueCallForm.value.memberMobile = AddQueueCallForm.value.memberMobile.slice(0, AddQueueCallForm.value.memberMobile.length - 1);
  }

}
const handleDelNum = () => {
  if (focusTarget.value == '到店人数') {
    AddQueueCallForm.value.peopleNum = ''
  } else {
    AddQueueCallForm.value.memberMobile = ''
  }
}
// -------------------------------------------------- 设置 --------------------------------------------------------------

// const options = ref([ {
//             value: '梦田欢迎你',
//             label: '梦田欢迎你',
//           }])
// const options1 = ref([ {
//             value: '请你就餐',
//             label: '请你就餐',
//           }])
const setupTabActive = ref(0)
const setupTabList = ref([
  {
    title: '等位超时送券',
    role:'queue-set-wait'
  },
  {
    title: '自定义语音录音',
    role:'queue-set-record'
  },
])

// 是否允许小程序取号
const isMiniQueue = ref(true)
const miniQueueChange = (e) => {
  if (e) {
    setupForm.value.isCloseMiniQueue = '1'
  } else {
    setupForm.value.isCloseMiniQueue = '0'
  }
}
const speechStartUrl = (val) => {
  console.log(val)
  setupForm.value.startPrompt = val
}
const speechMidUrl = (val) => {
  console.log(val)
  setupForm.value.baseVoiceValue = val
}
const speechEndUrl = (val) => {
  console.log(val)
  setupForm.value.endPrompt = val
}
// 修改设置
const changeSet = () => {
  console.log(setupForm.value);
  // return
  queueCallSet()
}


// 获取当前排队队列
const queueListForm = ref({
  queueSymbol: '',
  pageSize: 4,
  pageIndex: 1
})
const queueList = ref([]) // 排队队列
const queueListFirst = ref({}) // 排队列表第一条数据
const queueListOther = ref([]) // 排队列表其它数据
const GetQueueList = (flag) => {
  if (flag) {
    queueListForm.value.pageIndex = 1
  }
  Api.Common.PcObjProcess.Do({ "functionName": "GetQueueList", "contentData": queueListForm.value })
    .then(res => {
      console.log(res);
      queueListFirst.value = res.topQueue
      queueListOther.value = res.list
      saveStore.queList = res.list
      saveStore.queFirst = res.topQueue
      console.log(saveStore.queList,saveStore.queFirst);
    })
}
// 获取排队记录列表
const queueRecordListForm = ref({
  pageSize: '6',
  pageIndex: '1',
  selectedDate: dayjs().format('YYYY-MM-DD') 
})
const queueRecordList = ref([]) // 排队记录

const getQueueRecordList = (flag) => {
  if (flag) {
    queueRecordListForm.value.pageIndex = '1'
  }
  // console.log('selectedDate:',queueRecordListForm.value.selectedDate)
  Api.Common.PcObjProcess.Do({ "functionName": "GetQueueRecordList", "orgCode": "0004", "contentData": queueRecordListForm.value })
    .then(res => {
      console.log(res);
      queueRecordList.value = res.result
    })
}
// 获取排队类型列表
const queueTypeList = ref([])
const GetQueueTypeList = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "GetQueueTypeList", "orgCode": "0004", "contentData": '' })
    .then(res => {
      console.log(res);
      queueTypeList.value = res.result
    })
}
const controlCode = ref('') // 排队编码 
// 重打小票
const queueRePrintReceipts = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "QueueRePrintReceipts", "orgCode": "0004", "contentData": { "code": controlCode.value, "ip": ip.value } })
    .then(res => {
      console.log(res);
      ElNotification({
        title: '提示',
        message: res.result,
        type: 'success',
      })
      clearForm()
    })
}
// 排队叫号
const QueueArray = ref([]) // 语音播放数组
const QueueArrayBack = ref([]) // 语音播放数组备用
const audioBoxaa = ref(null)
const queueCall = () => {
  // 
  Api.Common.PcObjProcess.Do({ "functionName": "QueueCall", "orgCode": "0004", "contentData": { "code": controlCode.value } })
    .then(res => {
      console.log(res);
      ElNotification({
        title: '提示',
        message: '叫号成功',
        type: 'success',
      })
      GetQueueList() // 更新页面
      const ht = import.meta.env.VITE_BASE_API.replace('/api/', '')
      console.log(res);
      QueueArray.value = res.callList
      // QueueArray.value = res.callList.map(item => item);
      // QueueArrayBack.value = res.callList.map(item => item);
      callNum.value = res.callNum // 语音播放多少次
      playNum.value = 0
      paySound()
      canCall.value = false // 不能叫号
    })
  return
  if (!canCall.value) {
    ElNotification({
      title: '提示',
      message: '当前已经在叫号中',
      type: 'warning',
    })
    return
  }
}

const canCall = ref(true) // 是否还可以叫号（要保证两个叫号不能同时进行）
const callNum = ref('3') // 语音播放多少次
const callNumNow = ref('1') // 当前播放的次数
// 监听器 
watch(() => callNumNow.value, (newValue, oldValue) => {
  canCall.value = false // 不能取号
  if (newValue > callNum.value) {
    canCall.value = true // 播放完毕 可以取号
    return
  }
  setTimeout(function () {
    QueueArray.value = QueueArrayBack.value.concat();
    paySound()
  }, 3000); // 语音播报每一遍多少秒（最后一句话的时间要算进去）

});
// 语音播放
const playIndex = ref('')
const playNum = ref(0)
const paySound = () => {
  audioBoxaa.value.load()
  playIndex.value = QueueArray.value[playNum.value]
  console.log(playIndex.value, playNum.value)
  setTimeout(() => {
    audioBoxaa.value.play()
    playNum.value++
    audioBoxaa.value.addEventListener('ended', paySound, false);
  }, 100);
}
// 重新排队
const reQueue = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "ReQueue", "orgCode": "0004", "contentData": { "code": controlCode.value } })
    .then(res => {
      console.log(res);
      ElNotification({
        title: '提示',
        message: res.result,
        type: 'success',
      })
      GetQueueList(true)
      getQueueRecordList()
    })
}
// 加入黑名单
const queueBlock = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "QueueBlock", "orgCode": "0004", "contentData": { "code": controlCode.value }, remark: '' })
    .then(res => {
      console.log(res);
      ElNotification({
        title: '提示',
        message: res.result,
        type: 'success',
        // duration: 0,
      })
      getQueueRecordList()
    })
}
// 排队入座
const seatForm = ref({
  code: '', // 排队编码 
  roomCode: '' // 房台编码
})
const queueSeat = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "QueueSeat", "orgCode": "0004", "contentData": seatForm.value })
    .then(res => {
      console.log(res);
      ElNotification({
        title: '提示',
        message: res.result,
        type: 'success',
      })
      GetQueueList(true) // 更新页面
      GetQueueTypeList()
      getQueueRecordList()
    })
}
// 排队过号
const queuePass = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "QueuePass", "orgCode": "0004", "contentData": { "code": controlCode.value } })
    .then(res => {
      console.log(res);
      ElNotification({
        title: '提示',
        message: res.result,
        type: 'success',
      })
      GetQueueList(true) // 更新页面
      GetQueueTypeList()
      getQueueRecordList()
    })
}
// 排队清零
const queueClearSymbol = ref('')
const confirmShow = ref(false) // 排队清零确认弹窗
const queueClear = () => {
  confirmShow.value = true

}
const confirmClear = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "QueueClear", "orgCode": "0004", "contentData": { "queueSymbol": queueClearSymbol.value } })
    .then(res => {
      console.log(res);
      ElNotification({
        title: '提示',
        message: res.result,
        type: 'success',
      })
      confirmShow.value = false
      GetQueueList(true) // 更新页面
      GetQueueTypeList()
    })
}
// 新增排队取号
const AddQueueCallForm = ref({
  memberName: '', // 会员名称
  memberMobile: '', // 会员手机号
  peopleNum: '', // 到店人数
  remark: '无限制' // 备注
})

const showAll = ()=>{
  router.push({
      path: '/allque'
  })
}

//获取ip地址
const ip = ref("");
getLocalIPv4()
  .then((ipAddress) => {
    // 在这里处理获取到的 IP 地址
    ip.value = ipAddress;
    console.log("IP 地址:", ip.value);
  })
  .catch((error) => {
    console.error("发生错误:", error);
    // 在这里处理错误情况
  });

console.log(import.meta.env.VITE_BASE_API);
// version:版本 正式版为 release 体验版为 trial 开发版为 develop
let version = ref('')
if(import.meta.env.VITE_BASE_API == 'http://172.18.3.8:8090/api/'){
  version.value = 'develop'
}
if(import.meta.env.VITE_BASE_API == 'https://jtmckj.com:4090/api/'){
  version.value = 'trial'
}
if(import.meta.env.VITE_BASE_API == 'https://jtmckj.com/api/'){
  version.value = 'release'
}
const addQueueCall = () => {
  if (AddQueueCallForm.value.memberMobile != '') {
    if (!validateMobile(AddQueueCallForm.value.memberMobile)) return
  }
  Api.Common.PcObjProcess.Do({ "functionName": "AddQueueCall", "orgCode": "0004", "contentData": { ...AddQueueCallForm.value, "ip": ip.value,"version":version.value } })
    .then(res => {
      ElNotification({
        title: '提示',
        message: res.result,
        type: 'success',
      })
      AddQueueCallForm.value.peopleNum = ''
      AddQueueCallForm.value.memberMobile = ''
      GetQueueList() // 更新页面
      GetQueueTypeList()
    })
}
// 获取排队统计
const queueSummaryForm = ref({
  // beginTime: dayjs().startOf('day').format('YYYY-MM-DD'), // 开始时间
  // endTime: dayjs().endOf('day').format('YYYY-MM-DD')
  beginTime: transformWorkTime('今天',orgStartTime,orgEndTime)[0],
  endTime: transformWorkTime('今天',orgStartTime,orgEndTime)[1]
})
const queueSummary = ref({})
const getqueueSummary = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "QueueSummary", "orgCode": "0004", "contentData": queueSummaryForm.value })
    .then(res => {
      queueSummary.value = res
      console.log(queueSummary.value);
    })
}
// 排队呼叫设置
const setupForm = ref({
  isCloseMiniQueue: '', // 小程序是否可以取号
  code: '', // 编码 
  inHour:'', // 多少小时 - 恶意取号惩罚
  cancelNum:'',// 取消多少次 - 恶意取号惩罚
  lockHour:'', // 锁多少小时 - 恶意取号惩罚
  callMode: '', // 呼叫模式 
  callNum: '', // 呼叫次数 
  voiceType: '', // 语言包类型（测试叫号语音）
  startPrompt: '', // 开始提示语
  endPrompt: '', // 结束提示语 
  state: '', // 状态 
  remark: '', // 备注
  baseVoiceValue: '',
  limitKM:'' // 距离
})
// 获取排队呼叫设置
const getQueueCallSet = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "GetQueueCallSetConfig", "orgCode": "0004", "contentData": {} })
    .then(res => {
      setupForm.value = res
      console.log('排队设置', setupForm.value)
      voiceTypeFun(setupForm.value.voiceType)
      speechStart.value = setupForm.value.startPrompt
      speechMid.value = setupForm.value.baseVoiceValue
      speechEnd.value = setupForm.value.endPrompt
      if (res.isCloseMiniQueue == '0') {
        isMiniQueue.value = false
      } else {
        isMiniQueue.value = true
      }
      console.log('setupForm.value.voiceType', setupForm.value.voiceType)

    })
}
// 排队呼叫设置修改
const queueCallSet = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "QueueCallSet", "orgCode": "0004", "contentData": setupForm.value })
    .then(res => {
      console.log(res);
      ElNotification({
        title: '提示',
        message: res.result,
        type: 'success',
      })
    })
}

//获取语音人员列表
const personList = ref('')
const GetSpeechPersonList = () => {
  Api.Common.PcObjProcess.Do({ functionName: "GetSpeechPersonList", orgCode: "0004", contentData: '' })
    .then(res => {
      console.log(res.result);
      personList.value = res.result
      dubVoice.value = res.result[0].value
    })
}

//删除合成配音
const DeleteSpeechFile = (fileName) => {
  Api.Common.PcObjProcess.Do({ functionName: "DeleteSpeechFile", orgCode: "0004", contentData: { isBegin: "1", fileName } })
    .then(res => {
      console.log(res.result);
      GetSpeechList('1')
    })
}

//重命名配音文件
const ReNameFile = (item) => {
  item.reName = false
  console.log(item)
  if (item.name != item.fileName.split('.')[0]) {
    Api.Common.PcObjProcess.Do({ functionName: "ReNameSpeechFile", contentData: { oldFileName: item.fileName, newFileName: item.name + '.mp3' } })
      .then(res => {
        console.log(res)
        GetSpeechList('1')
      })
  }
}

//播放
const audioBox = ref(null);
const playAudio = (item, index) => {
  // audioBox.value[index].src = item.url
  audioBox.value[index].play()
}
const pauseAudio = (item, index) => {
  audioBox.value[index].pause()
}

//播放状态
const onPlay = (item) => {
  item.state = '1'
}
const onPause = (item) => {
  item.state = '0'
}
// ----------------------------------------------------- 初始化 ----------------------------------------------------------
const onInit = () => {
  // 初始化默认时间 
  queueRecordListForm.value.selectedDate = transformWorkTime('今天',orgStartTime,orgEndTime)[0].substring(0,10) 

  GetQueueList(true) // 获取当前排队列表
  getQueueRecordList() // 获取排队记录列表
  GetQueueTypeList() // 获取排队类型列表
  getqueueSummary() // 获取排队统计
  getQueueCallSet() // 获取排队呼叫设置
  getNowDate()
  GetSpeechPersonList()
  // GetSpeechList()
}



// -----------------------赠金币/券-------------------
let SendVisible = ref(false)
const SendRef = ref()
const handleSend = (name) => {
  SendVisible.value = true
  nextTick(() => {
    SendRef.value.open('queue')
  });
}
// 取消表格弹窗
const emitSendCancel = (params) => {
  console.log(params)
  SendVisible.value = false
}
// 提交表格弹窗
const emitSendSubmit = (params) => {
  console.log(params)
  SendVisible.value = false
}


const initFilter = () => { 
  let localConsultList = [{
    title: '排队大厅',
    name:'queue-list'
  },
  {
    title: '排队统计',
    name:'queue-stat' 
  },
  {
    title: '设置',
    name:'queue-set' 
  }]   
  const roleAll = new Map(ls.get('USER_ROLE_ALL') .map(item => [item.name, item])); 
  consultList.value = localConsultList.filter(item => roleAll.has(item.name))  
  if(consultList.value.length > 0){
    consultActive.value = consultList.value[0].name 
    onInit()  
  }else{
    ElNotification({
      title: '提示',
      message: '当前没有权限访问该页面，请联系管理员',
      type: 'warning',
    })
  }
}
let searchQue = null
onMounted(() => {
  initFilter()
  searchQue =  setInterval(() => {
    GetQueueList()
  }, 3000);
 
});
onUnmounted(() => {
  clearInterval(searchQue);
})

// 免排卷核销
const freeShow = ref(false)
const freeForm = () => {
  freeShow.value = false
}

</script>

<style scoped lang="scss">
@import '@/styles/com_style_input.css';
.queue-container {
  display: flex;
  align-items: start;
  // justify-content: space-between;
  white-space: nowrap;

  .queue-left {
    margin-right: 60px;

    .queue-left-tabs {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .queue-tab {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        line-height: 18px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        width: 240px;
        text-align: center;
        padding: 21px 0;
        margin-right: 40px;
        cursor: pointer;

        &:last-child {
          margin-right: 0;
        }

        &.active {
          background: #ffd400;
          border: none;
          color: #212121;
        }
      }
    }

    .el-tabs {
      ::v-deep(.el-tabs__nav-wrap) {
        display: flex;
      }

      ::v-deep(.el-tabs__header) {
        // margin-bottom: 24px;
      }

      ::v-deep(.el-tabs__nav-scroll) {
        // display: flex;
        flex: 1;
        background: #E6E6E6;
        border-radius: 8px;
      }

      ::v-deep(.el-tabs__nav) {
        width: 100%;
        padding: 0 169px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      ::v-deep(.el-tabs__item) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
      }

      ::v-deep(.el-tabs__active-bar) {
        width: 22px !important;
        left: 16px;
        bottom: 4px;
        background-color: #FF6A00;
        height: 2px !important;
      }

      &.spe {
        ::v-deep(.el-tabs__nav) {
          width: 100%;
          padding: 0 86px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        ::v-deep(.el-tabs__active-bar) {
          width: 22px !important;
          left: 5px;
          bottom: 4px;
          background-color: #FF6A00;
          height: 2px !important;
        }
      }

      ::v-deep(.el-tabs__item.is-active) {
        color: #FF6A00;
      }
      .tab-quebgf {
         min-height: 763px;
          background: #fff;
          padding-top: 20px;
          border-radius:8px ;
         .history-btn {
          cursor: pointer;
          width: 100px;
          height: 40px;
          background: #E6E6E6;
          border-radius: 8px;
          text-align: center;
          line-height: 40px;
          font-size: 16px;
          color: #666666;
         }
         .mbj-hx-btn {
          margin-right: 15px;
          cursor: pointer;
          width: 100px;
          height: 40px;
          background: #E6E6E6;
          border-radius: 8px;
          text-align: center;
          line-height: 40px;
          font-size: 16px;
          color: #666666;
         }
         .history-rutern {
          background: #FFE566;
         color: #212121;
         }
        }
      .tab-queue {
         padding-right: 20px;
         padding-left: 20px;
         .tab-queue-aicnet {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 11px;
          border-bottom: 1px solid #E6E6E6;
         }
        .tab-queue-top {
          display: flex;
          align-items: center;
          // justify-content: space-between;
          // border-bottom: 1px solid #E6E6E6;
          padding: 0px 40px 0px 0px;
          // margin-bottom: 21px;

          .top-item {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            line-height: 16px;
            cursor: pointer;
            margin-right: 40px;
            &.active {
              color: #FF6A00;
            }
          }
        }

        .tab-queue-nav {
          padding: 20px 40px 0  60px;
          background: #FFFFFF;
          border-radius: 8px;
          // margin-bottom: 20px;
          .nav-upper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;

            .nav-upper-left {
              display: flex;
              align-items: center;

              .left-nowPeo {
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-size: 24px;
                color: #212121;
                line-height: 24px;
                margin-right: 20px;
              }

              .left-table {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #009900;
                line-height: 16px;
              }
            }

            .nav-upper-right {
              display: flex;

              .right-button {
                width: 120px;
                height: 48px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #212121;
                line-height: 48px;
                text-align: center;
                border-radius: 8px;
                border: 1px solid #999999;
                margin-left: 20px;
                cursor: pointer;

                &.active {
                  color: #FF6A00;
                  border: 1px solid #FF6A00;
                }
              }
            }
          }

          .nav-below {
            background: #FFF7CC;
            border-radius: 8px;
            padding: 10px 20px 10px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            .nav-below-main{
              position: absolute;
              left: 0;
              top: 0;
              width: 40px;
              height: 24px;
              background-image: url('https://oss.jtmckj.com/pc/images/queue/i_icon_mian.png');
              background-position: center;
              background-size: cover;

            }
            .below-value {
              width: 120px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              font-size: 48px;
              color: #212121;
              line-height: 48px;
            }
          
            .below-center {
              width: 200px;
              height: 60px;
              background: #FFFBE3;
              border-radius: 4px;
              padding: 10px 0 5px 0px;

              .center-top {
                display: flex;
                align-items: center;
                margin-bottom: 10px;

                .people-num {
                  margin-left: 10px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 16px;
                  color: #212121;
                  line-height: 16px;
                }

                .table-style {
                  width: 32px;
                  height: 20px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 12px;
                  color: #FFFEFE;
                  text-align: center;
                  line-height: 20px;
                  background: #FF3333;
                  border-radius: 4px;
                }
              }

              .center-bottom {
                overflow: hidden;
                .state {
                  margin-left: 20px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 14px;
                  color: #FF6A00;
                  line-height: 14px;
                }
              }
            }

            .below-right {
              display: flex;
              align-items: center;

              .below-button {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 20px;
                color: #212121;
                line-height: 20px;
                border-radius: 8px;
                padding: 10px 21px;
                cursor: pointer;

                &.spe1 {
                  background: #FFE566;
                }

                &.spe2 {
                  background: #FFA666;
                  margin-left: 20px;
                }

                &.spe3 {
                  background: #E6E6E6;
                  margin-left: 20px;
                }
              }
            }
          }
        }

        .tab-queue-main {
          background: #FFFFFF;
          border-radius: 8px;
          padding-bottom: 22px;

          .queue-main-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 22px 40px 22px 60px;

            .top-left {
              font-family: Microsoft YaHei;
              font-weight: bold;
              font-size: 24px;
              color: #212121;
              line-height: 24px;
            }

            .top-right {
              display: flex;
              align-items: center;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              line-height: 16px;
              color: #00AAFF;

              .top-right-up {
                padding: 12px 16px;
                // margin-right: 20px;
                cursor: pointer;
                background: #F2F2F2;
                border-radius: 8px;
              }

              .top-right-down {
                margin-left: 20px;
                padding: 12px 16px;
                cursor: pointer;
                background: #F2F2F2;
                border-radius: 8px;
              }
            }
          }

          .queue-main-center {
            .center-item {
              padding: 0 40px 0 60px;
              position: relative;
              margin-bottom: 21px;

              .item-number {
                position: absolute;
                left: 27px;
                top: 22px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 20px;
                color: #FF3333;
                line-height: 36px;
                padding-right: 27px;
              }

              .nav-below {
                background: #F2F2F2;
                border-radius: 8px;
                padding: 10px 20px 10px 32px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                .nav-below-main{
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 40px;
                  height: 24px;
                  background-image: url('https://oss.jtmckj.com/pc/images/queue/i_icon_mian.png');
                  background-position: center;
                  background-size: cover;

                }
                .below-value {
                  width: 120px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  font-size: 48px;
                  color: #212121;
                  line-height: 48px;
                }

                .below-center {
                  width: 200px;
                  height: 60px;
                  background: #FFFBE3;
                  border-radius: 4px;
                  padding: 10px 0 5px 0px;

                  .center-top {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;

                    .people-num {
                      margin-left: 10px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 16px;
                      color: #212121;
                      line-height: 16px;
                    }

                    .table-style {
                      width: 32px;
                      height: 20px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 12px;
                      color: #FFFEFE;
                      text-align: center;
                      line-height: 20px;
                      background: #FF3333;
                      border-radius: 4px;
                    }
                  }

                  .center-bottom {
                    overflow: hidden;
                    .state {
                      margin-left: 20px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 14px;
                      color: #FF6A00;
                      line-height: 14px;
                    }
                  }
                }

                .below-right {
                  display: flex;
                  align-items: center;

                  .below-button {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 20px;
                    color: #212121;
                    line-height: 20px;
                    border-radius: 8px;
                    padding: 10px 21px;
                    cursor: pointer;

                    &.spe1 {
                      background: #FFE566;
                    }

                    &.spe2 {
                      background: #FFA666;
                      margin-left: 20px;
                    }

                    &.spe3 {
                      background: #E6E6E6;
                      margin-left: 20px;
                    }
                  }
                }

                .below-radio {
                  width: 20px;
                  height: 20px;
                  position: absolute;
                  right: -30px;

                  ::v-deep(.el-radio__inner) {
                    // margin-left: 20px;
                    width: 20px;
                    height: 20px;
                    border-color: #ff6a00;
                  }

                  ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
                    border-color: #ff6a00;
                    /* 选中状态边框颜色 */
                    background-color: #ffffff;
                    /* 选中状态背景颜色 */
                  }

                  ::v-deep(.el-radio__inner:after) {
                    background-color: #ff6a00;
                    width: 8px;
                    height: 8px;
                  }

                  ::v-deep(.el-radio__label) {
                    display: none;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #666666;
                    line-height: 16px;
                  }
                }
              }
            }
            .center-item:nth-last-child(1)  {
               margin-bottom: 0;
            }
          }
        }
      }

      .tab-record {
        .tab-record-top {
          margin-top: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;

          .tab-record-data {
            display: flex;
            align-items: center;

            .data-title {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              color: #212121;
              line-height: 16px;
            }
          }

          .tab-record-btn {
            margin-right: 60px;
            display: flex;
            align-items: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #00AAFF;
            line-height: 16px;

            .btn-up {
              background: #F2F2F2;
              border-radius: 8px;
              padding: 12px 15px;
              color: #00AAFF;
              cursor: pointer;
            }

            .btn-down {
              background: #F2F2F2;
              border-radius: 8px;
              padding: 12px 15px;
              margin-left: 20px;
              color: #00AAFF;
              cursor: pointer;
            }
          }

          ::v-deep(.el-date-editor.el-input) {
            width: 400px;
            height: 48px;
          }
        }

        .tab-record-main {
          background: #FFFFFF;
          border-radius: 8px;
          padding: 20px 0 1px;

          .center-item {
            padding: 0 60px;
            position: relative;
            margin-bottom: 20px;

            .item-number {
              position: absolute;
              left: 27px;
              top: 22px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 20px;
              color: #FF3333;
              line-height: 36px;
              padding-right: 27px;
            }

            .nav-below {
              background: #F2F2F2;
              border-radius: 8px;
              padding: 10px 20px 10px 32px;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .below-value {
                width: 140px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-size: 48px;
                color: #212121;
                line-height: 48px;
              }

              .below-center {
                width: 200px;
                height: 60px;
                background: #FFFBE3;
                border-radius: 4px;
                padding: 10px 0 5px 16px;

                .center-top {
                  display: flex;
                  align-items: center;
                  margin-bottom: 10px;

                  .people-num {
                    margin-left: 10px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 16px;
                  }

                  .table-style {
                    width: 32px;
                    height: 20px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 12px;
                    color: #FFFEFE;
                    text-align: center;
                    line-height: 20px;
                    background: #FF3333;
                    border-radius: 4px;
                  }
                }

                .center-bottom {
                  overflow: hidden;
                  .state {
                    margin-left:10px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FF6A00;
                    line-height: 14px;
                  }
                }
              }

              .below-right {
                display: flex;
                align-items: center;

                .below-button {
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 20px;
                  color: #212121;
                  line-height: 20px;
                  border-radius: 8px;
                  padding: 10px 21px;
                  cursor: pointer;

                  &.spe1 {
                    background: #FFE566;
                  }

                  &.spe2 {
                    background: #FFA666;
                    margin-left: 20px;
                  }

                  &.spe3 {
                    background: #E6E6E6;
                    margin-left: 20px;
                  }
                }
              }
            }
          }
        }
      }

      .tab-last {
        background: #FFFFFF;
        border-radius: 8px;
        padding: 30px 60px;
        min-height: 723px;

        .tab-last-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 29px;
          border-bottom: 1px solid #E5E5E5;

          .top-left {
            display: flex;
            align-items: center;

            .left-title {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 20px;
              color: #212121;
              line-height: 20px;
              margin-right: 58px
            }
          }

          .top-right {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
            line-height: 16px;
          }
        }

        .tab-last-main {
          .main-title {
            display: flex;
            align-items: center;
            padding: 20px 0;

            .main-title-item {
              width: 20%;
              text-align: center;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              color: #666666;
              line-height: 16px;
            }
          }

          .main-value {

            // display: flex;
            // align-items: center;
            .main-value-item {
              display: flex;
              align-items: center;
              width: 100%;
              padding: 17px 0;

              &.odd {
                background: #F2F2F2;
                border-radius: 8px;
              }

              .item {
                width: 20%;
                text-align: center;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #212121;
                line-height: 16px;
              }
            }
          }
        }
      }
    }

    .queue-left-setup {
      background: #FFFFFF;
      border-radius: 8px;
      padding: 29px 28px 49px 28px;
      .setup-top {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #212121;
        line-height: 20px;
        padding-bottom: 30px;
        border-bottom: 1px solid #E5E5E5;
      }

      .setup-main {
        padding-top: 14px;
        padding-bottom: 10px;

        .setup-main-item {
          display: flex;
          align-items: center;
          padding-bottom: 30px;

          .item-left {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
            line-height: 16px;
            width: 160px;
            text-align: right;
            // float: left;
          }

          .item-center {
            width: 62px;
          }

          .item-take {
            display: flex;
            align-items: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 14px;
            .right-take-title {
              padding: 0 19px 0 11px;
            }
          }
          .item-distance{
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #999999;
              line-height: 14px;
              ::v-deep(.el-input){
                width: 60px;
                height: 40px;
                background: #F9F9F9;
                border-radius: 8px;
              }
              ::v-deep(.el-input__wrapper){
                width: 60px;
                height: 40px;
                background: #F9F9F9;
                border-radius: 8px;
              }
              ::v-deep(.el-input__inner ){
                width: 60px;
                height: 40px;
                padding-left: 10px;
                background: #F9F9F9;
                border-radius: 8px;
              }
              :deep input::-webkit-inner-spin-button{
                  -webkit-appearance: none !important;
              }
             
            }
          .item-right {
            display: flex;
            align-items: center;
          }

          ::v-deep(.el-select__wrapper) {
            width: 460px;
            height: 48px;
            background: #F9F9F9;
            border-radius: 8px;
          }
        }

        .setup-main-footer {
          display: flex;
          align-items: center;
          padding-top: 10px;

          // justify-content: center;
          .footer-btn-back {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FF6A00;
            line-height: 24px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            padding: 18px 55px;
            margin-right: 36px;
            margin-left: 220px;
            cursor: pointer;
          }

          .footer-btn-save {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 24px;
            background: #FF6A00;
            border-radius: 8px;
            padding: 18px 55px;
            cursor: pointer;
          }
        }
      }

      .setup-footer {
        .footer-title {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 20px;
          color: #212121;
          line-height: 20px;
          padding-bottom: 30px;
          border-bottom: 1px solid #E5E5E5;
          margin-bottom: 21px
        }

        .footer-value {
          display: flex;
          align-items: center;
          justify-content: flex-start;

          .footer-value-tab {
            width: 158px;
            height: 48px;
            background: #FFD400;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
            line-height: 48px;
            cursor: pointer;
            margin-right: 16px;
            text-align: center;
            // &.active{
            //   color: #FF6A00;
            //   border-radius: 8px;
            //   border: 1px solid #FF6A00;
            // }
          }
        }
      }

      ::v-deep(.el-switch__core) {
        background: #999999;
        border-color: #999999;
      }

      ::v-deep(.el-switch.is-checked .el-switch__core) {
        background-color: #ff6a00;
        border-color: #ff6a00;
      }

      ::v-deep(.el-radio__inner) {
        // margin-left: 20px;
        width: 20px;
        height: 20px
      }

      ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
        border-color: #ff6a00;
        /* 选中状态边框颜色 */
        background-color: #ffffff;
        /* 选中状态背景颜色 */
      }

      ::v-deep(.el-radio__inner:after) {
        background-color: #ff6a00;
        width: 8px;
        height: 8px;
      }

      ::v-deep(.el-radio__label) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #666666;
        line-height: 16px;
      }
    }
  }

  .queue-right {

    background: #FFFFFF;
    border-radius: 8px;
    padding: 40px 60px;

    .queue-right-title {
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 24px;
      color: #212121;
      line-height: 24px;
      padding-bottom: 47px;
    }

    .queue-right-people {
      display: flex;
      align-items: center;
      padding-bottom: 20px;

      ::v-deep(.el-input__wrapper) {
        height: 48px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #999999;
        line-height: 16px;
        padding-left: 20px;
      }

      .people-num {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
      }
    }

    .queue-right-mobile {
      display: flex;
      align-items: center;

      ::v-deep(.el-input__wrapper) {
        height: 48px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #999999;
        line-height: 16px;
        padding-left: 20px;
      }

      .mobile {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
      }

    }


    .queue-right-ask {
      display: flex;
      align-items: center;
      padding: 34px 0 62px 87px;

      .ask-title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
      }
    }

    .queue-right-btn {
      margin-bottom: 64px;

      .btn-items {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        .item {
          width: 120px;
          height: 96px;
          text-align: center;
          background: #E6E6E6;
          border-radius: 8px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 32px;
          color: #212121;
          line-height: 96px;
          margin-right: 20px;

          &.spe {
            background-image: url('https://oss.jtmckj.com/pc/images/queue/i_btn_del.png');
            background-size: 52px 40px;
            background-repeat: no-repeat;
            background-position: center;
          }
        }
      }
    }

    .queue-right-take {
      background: #FF6A00;
      border-radius: 8px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      line-height: 24px;
      padding: 19px 0;
      text-align: center;
      cursor: pointer;
    }

    ::v-deep(.el-radio__inner) {
      // margin-left: 20px;
      width: 20px;
      height: 20px
    }

    ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
      border-color: #ff6a00;
      /* 选中状态边框颜色 */
      background-color: #ffffff;
      /* 选中状态背景颜色 */
    }

    ::v-deep(.el-radio__inner:after) {
      background-color: #ff6a00;
      width: 8px;
      height: 8px;
    }

    ::v-deep(.el-radio__label) {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #666666;
      line-height: 16px;
    }

    // ::v-deep(.el-radio__input.is-checked+.el-radio__label){

    // }
  }
}

.confirmPopue {
  .confirmPopue-title {
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #212121;
    line-height: 24px;
  }

  .confirmPopue-center {
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: 500;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding: 40px 0;

    .top-item {
      display: flex;
      align-items: center;
      padding: 0px 40px 20px;

      .top-item-title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
        width: 120px;
      }

      ::v-deep(.el-select__wrapper) {
        width: 40%;
      }
    }

  }

  .confirmPopue-input {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;

    .confirmPopue-input-title {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 18px;
      color: #212121;
      line-height: 18px;
    }

    .confirmPopue-input-value {
      width: 268px;
      height: 48px;
      background: #FAFAFA;
      border-radius: 8px;
      padding-left: 12px;
      margin-left: 16px;
    }

    .confirmPopue-input-icon {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 18px;
      color: #212121;
      line-height: 18px;
    }
  }

  .popup-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    .btn-cancle {
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 24px;
      color: #FF6A00;
      line-height: 60px;
      width: 160px;
      height: 60px;
      background: #FFFFFF;
      border-radius: 8px;
      border: 1px solid #FF6A00;
      margin-right: 36px;
      cursor: pointer;
    }

    .btn-submit {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      line-height: 60px;
      text-align: center;
      width: 160px;
      height: 60px;
      background: #FF6A00;
      border-radius: 8px;
      cursor: pointer;
    }
  }
}
.below-center_bf {
    background: #EBEBEB !important;
}
::v-deep(.couponGift) {
  border-radius: 15px;
  box-sizing: border-box;
  padding: 0 60px;

  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__footer {
    // padding: 0;
  }

  .couponTitle {
    font-size: 20px;
    font-weight: bold;
    color: #212121;
    padding: 20px 0;
    border-bottom: 1px solid #E5E5E5;
  }

  .couponForm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;

    .formName {
      color: #212121;
      width: 15%;
      text-align: right;
      font-size: 16px;
    }

    .formType1 {
      width: 83%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      input {
        width: 82%;
        background-color: #F9F9F9;
        font-size: 16px;
        padding: 15px 20px;
        border-radius: 10px;
        box-sizing: border-box;
      }

      .formBtn {
        width: 14%;
        text-align: center;
        background-color: #FFE566;
        padding: 15px 0;
        border-radius: 10px;
        font-size: 16px;
        color: #212121;
      }
    }

    .formType2 {
      width: 83%;

      .el-select__wrapper {
        background: #F9F9F9;
        box-shadow: 0 0 0 1px transparent;
        padding: 17px 20px;
        font-size: 16px;
        border-radius: 10px;
      }

      .el-select__wrapper:hover {
        box-shadow: 0 0 0 1px transparent;
      }

      .el-select__wrapper.is-focused {
        box-shadow: 0 0 0 0 transparent;
      }
    }

    .formType3 {
      width: 83%;

      input {
        width: 100%;
        background-color: #F9F9F9;
        font-size: 16px;
        padding: 15px 20px;
        border-radius: 10px;
        box-sizing: border-box;
      }
    }

    .formType4 {
      width: 83%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .el-select {
        width: 82%;

        .el-select__wrapper {
          background: #F9F9F9;
          box-shadow: 0 0 0 1px transparent;
          padding: 17px 20px;
          font-size: 16px;
          border-radius: 10px;
        }

        .el-select__wrapper:hover {
          box-shadow: 0 0 0 1px transparent;
        }

        .el-select__wrapper.is-focused {
          box-shadow: 0 0 0 0 transparent;
        }
      }

      .formBtn {
        width: 14%;
        text-align: center;
        background-color: #FFE566;
        padding: 15px 0;
        border-radius: 10px;
        font-size: 16px;
        color: #212121;
      }
    }

    .formType5 {
      width: 83%;

      .Type5 {
        width: 15%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #F9F9F9;
        border-radius: 10px;
        padding: 15px 20px;
        box-sizing: border-box;

        input {
          width: 68%;
          font-size: 16px;
        }

        div {
          width: 20%;
          box-sizing: border-box;
          font-size: 16px;
        }
      }
    }
  }

  .couponDateType1 {
    margin-left: 17%;
    display: flex;
    align-items: center;

    .pickerTitle {
      font-size: 16px;
    }

    .Picker {
      background-color: #FAFAFA;
      border-radius: 10px;
      padding: 10px 0;
      display: flex;

      >span {
        display: block;
        height: 30px;
        line-height: 30px;
        margin-left: 20px;
        font-size: 16px;
      }

      .el-input__wrapper {
        margin-left: 10px;
        box-shadow: 0 0 0 1px transparent inset;
        font-size: 16px;
        background-color: #FAFAFA;
      }
    }

    // ::v-deep(.el-input__inner){
    //   color: #212121;
    // }
    // ::v-deep(.el-input__wrapper:hover){
    //     box-shadow: 0 0 0 1px transparent inset;
    // }
  }

  .couponDateType2 {
    margin-left: 17%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .dateItem {
      display: flex;
      align-items: center;
      color: #212121;
      font-size: 16px;
      margin-right: 60px;

      .dateCount {
        display: flex;
        align-items: center;
        border: 1px solid #CCCCCC;
        border-radius: 5px;
        margin-right: 10px;

        .btn {
          padding: 13px 0;
          font-size: 18px;
          width: 40px;
          text-align: center;
        }

        .count {
          padding: 13px 30px;
          border-left: 1px solid #CCCCCC;
          border-right: 1px solid #CCCCCC;
          font-size: 18px;
        }
      }
    }
  }

  .couponUseInfo {
    margin-left: 17%;
    display: flex;
    align-items: center;

    div {
      width: 150px;
      font-size: 16px;
      color: #212121;
    }

    span {
      color: #FF3333;
    }
  }
}

::v-deep(.el-radio__inner:hover) {
  border-color: #ff6a00;
}

::v-deep(.dubbingMask) {
  border-radius: 15px;
  box-sizing: border-box;
  padding: 0 60px;
  box-sizing: border-box;

  .el-dialog__header {
    padding: 0;
  }

  .dubbingTitle {
    font-size: 20px;
    font-weight: bold;
    color: #212121;
    padding: 30px 0;
    border-bottom: 1px solid #E5E5E5;
  }

  .dubbingContent {
    width: 60%;
    margin: auto;
    font-size: 16px;
    color: #212121;

    .minTitle {
      font-size: 18px;
      font-weight: bold;
      padding-top: 20px;
      padding-bottom: 10px;
    }

    .rule {
      line-height: 1.6;
      text-indent: 16px;
    }

    textarea {
      line-height: 1.6;
      font-size: 16px;
      background-color: #F9F9F9;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 15px 20px;
      resize: none;
      width: 100%;
    }

    .changeTitle {
      cursor: pointer;
      background-color: #FFD400;
      text-align: center;
      margin: 25px 0;
      padding: 13px 0;
      border-radius: 10px;
      font-size: 18px;
    }

    .dubbingTabTop {
      display: flex;
      align-items: center;
      background-color: #F9F9F9;
      border-radius: 10px;
      padding: 15px 0;

      div {
        font-size: 14px;
        text-align: center;
        color: #666666;
      }

      div:nth-child(1) {
        width: 60%;
      }

      div:nth-child(2) {
        width: 40%;
      }
    }

    .dubbingTab {
      display: flex;
      align-items: center;
      padding: 10px 0;

      input {
        width: 60%;
        font-size: 14px;
        text-align: center;
        color: #666666;
        padding: 5px 0;
      }

      .dubbingName {
        background-color: #F2F2F2;
        border-radius: 5px;
      }

      .dubbingMenu {
        width: 40%;
        font-size: 14px;
        text-align: center;
        color: #666666;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;

        span {
          display: block;
          width: 33.33333%;
          color: #00AAFF;
          cursor: pointer;
          text-align: center;
        }
      }
    }
  }
}


.dialog-footer {
  display: flex;
  justify-content: end;
  padding-bottom: 20px;

  .el-button {
    width: 160px;
    height: 60px;
    font-size: 26px;
    border-color: #FF6A00;
    color: #FF6A00;
    border-radius: 10px;
    background-color: #fff;
  }

  .el-button:nth-child(2) {
    background-color: #FF6A00;
    color: #fff;
  }

  .el-button:hover {
    background-color: none;
  }

  // .el-button:hover{
  //     background-color: #FF6A00;
  //     color: #fff;
  // }
  .el-button+.el-button {
    margin-left: 30px;
  }
}
.red-col {
  color: #FF3333 !important;
}
.oreg-col {
  color: #FF6A00 !important;
}
.gre-col {
  color: #00A341 !important;
}
.default-col {
  color: #212121 !important;
}
::v-deep .item-distance .el-input__wrapper {
  border: none !important;
}
.action-btn-box {
    
    display: flex;
    justify-content: space-between;

    button {
      width: 120px;
      height: 50px;
      line-height: 50px;
      background: #FFE566;
      border-radius: 8px;
      border: 0;
      font-size: 16px;
      color: #212121;
    }

    .reset-btn {
      background: #E6E6E6;
      color: #666666;
    }
  }
  ::v-deep .ke_date-picker .el-input {
    width: 250px !important;
    margin-right: 20px;
  }
</style>
